<section class="Hui-article-box">
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span>
        我的资源
    </nav>
    <div class="Hui-article">
        <article class="cl pd-20">
            <div class="text-c">
                <form id="myForm" action="/resource/userResource" method="post">
                    &nbsp 集群:
                    <span class="select-box inline">
                        <select id="cluster" name="cluster" class="select" style="width:160px" value="${clusterSelect!''}">
                        </select>
                    </span>
                    &nbsp 实例:
                    <span class="select-box inline">
                        <select id="instance" name="instance" class="select" style="width:160px" value="${instanceSelect!''}">
                        </select>
                    </span>
                    &nbsp 属性:
                    <span class="select-box inline">
                        <select id="attribute" name="attribute" class="select" style="width:160px" value="${attributeSelect!''}">
                        </select>
                    </span>
                    <button id="find" onclick="doSubmit()" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i>查找</button>
                </form>
            </div>
            <div class="cl pd-5 bg-1 bk-gray mt-20">
                <span class="l">共有数据：<strong><#if resources??>${resources?size}<#else>0</#if></strong> 条</span>
				<span class="r">
				    <a onclick="batchEditAttribute()" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe6df;</i> 批量修改</a>
                    <a onclick="removeInstance()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 移除实例</a>
				</span>
            </div>
            <div class="mt-20">
                <table class="table table-border table-bordered table-bg table-hover table-sort">
                    <thead>
                    <tr class="text-c">
                        <th width="150">集群</th>
                        <th width="120">实例</th>
                        <th width="200">属性</th>
                        <th>当前值</th>
                        <th>原属性值</th>
                        <th width="120">更新时间</th>
                        <th width="50">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <#if resources??>
                        <#list resources as r>
                        <tr class="text-c">
                            <td>${r.cluster}</td>
                            <td>${r.ip}</td>
                            <td>${r.attribute}</td>
                            <td><#if r.attributeValue?exists><font color="red">${r.attributeValue}</font></#if></td>
                            <td>${r.attributeOldValue!}</td>
                            <td><#if r.updateTime?exists>${r.updateTime?string("yyyy-MM-dd HH:mm:ss")}</#if></td>
                            <td class="f-14 td-manage">
                                <a style="text-decoration:none" class="ml-5" onClick="editAttribute('修改属性 ID:${r.id}','/resource/edit?id=${r.id}','10001','500','350')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
                            </td>
                        </tr>
                        </#list>
                    </#if>
                    </tbody>
                </table>
            </div>
        </article>
    </div>
</section>

<#include "../common/_footer.html">

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/resources/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/resources/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/resources/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">

    /* 集群信息-JsonArray */
    var clusters = JSON.parse('${clusters}');

    var clusterSelect = "${clusterSelect!''}";
    var instanceSelect = "${instanceSelect!''}";
    var attributeSelect = "${attributeSelect!''}";

    window.onload = linkage(clusterSelect, instanceSelect, attributeSelect);

    /*
     * 三级下拉菜单-联动关系
     *
     * 优质代码片段，本人极力推荐收藏
     *
     */
    function linkage(c_s, i_s, a_s) {
        var cluster = document.getElementById("cluster");
        var instance = document.getElementById("instance");
        var attribute = document.getElementById("attribute");

        cluster.options[0] = new Option("全部", "全部");
        instance.options[0] = new Option("全部", "全部");
        attribute.options[0] = new Option("全部", "全部");

        // 定义级联关系
        for (var i = 0; i < clusters.length; i++) {
            cluster.options[cluster.length] = new Option(clusters[i].name, clusters[i].name);
            cluster.onchange = function() {
                instance.options.length = 0;
                instance.options[instance.length] = new Option("全部", "全部");
                attribute.options.length = 0;
                attribute.options[attribute.length] = new Option("全部", "全部");
                if (cluster.selectedIndex > 0) {
                    for (var j = 0; j < clusters[cluster.selectedIndex - 1].instanceList.length; j++) {
                        var address = clusters[cluster.selectedIndex - 1].instanceList[j].address;
                        instance.options[instance.length] = new Option(address, address);
                        instance.onchange = function () {
                            attribute.options.length = 0;
                            attribute.options[attribute.length] = new Option("全部", "全部");
                            if (instance.selectedIndex > 0) {
                                for (var k = 0; k < clusters[cluster.selectedIndex - 1].instanceList[instance.selectedIndex - 1].attributeList.length; k++) {
                                    var attr = clusters[cluster.selectedIndex - 1].instanceList[instance.selectedIndex - 1].attributeList[k];
                                    attribute.options[attribute.length] = new Option(attr, attr);
                                }
                            } else {
                                // 实例为全部时 默认给属性select 当前选中集群的第一个实例的属性列表
                                for (var k = 0; k < clusters[cluster.selectedIndex - 1].instanceList[0].attributeList.length; k++) {
                                    var attr = clusters[cluster.selectedIndex - 1].instanceList[0].attributeList[k];
                                    attribute.options[attribute.length] = new Option(attr, attr);
                                }
                            }
                        }
                    }
                    // 实例为全部时 默认给属性select 当前选中集群的第一个实例的属性列表
                    if (instance.selectedIndex === 0) {
                        for (var k = 0; k < clusters[cluster.selectedIndex - 1].instanceList[0].attributeList.length; k++) {
                            var attr = clusters[cluster.selectedIndex - 1].instanceList[0].attributeList[k];
                            attribute.options[attribute.length] = new Option(attr, attr);
                        }
                    }
                }
            }
        }

        // 页面跳转回来时，处理上次查询选中相的关系
        for (var x=0; x < cluster.options.length; x++) {
            if (cluster.options[x].value == c_s) {
                cluster.options[x].selected = true;
                cluster.onchange();
            }
        }
        for (var x=0; x < instance.options.length; x++) {
            if (instance.options[x].value == i_s) {
                instance.options[x].selected = true;
                instance.onchange();
            }
        }
        for (var x=0; x < attribute.options.length; x++) {
            if (attribute.options[x].value == a_s) {
                attribute.options[x].selected = true;
            }
        }
    }

    $('.table-sort').dataTable({
        "aaSorting": [[ 2, "asc" ]],//默认第几个排序
        "bStateSave": true,//状态保存
        "aoColumnDefs": [
            //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
            {"orderable":false,"aTargets":[6]}// 不参与排序的列
        ]
    });

    /* 移除实例-前置校验 */
    function checkRemoveInstance() {
        var cluster = $("#cluster").val();
        var instance = $("#instance").val();
        if (cluster==="全部") {
            layer.tips('请选择集群', '#cluster', {tips:3});
            return false;
        }
        if (instance==="全部") {
            layer.tips('请选择实例', '#instance', {tips:3});
            return false;
        }
        return true;
    }

    /* 移除实例 */
    function removeInstance() {
        var cluster = $("#cluster").val();
        var instance = $("#instance").val();
        if (checkRemoveInstance()) {
            var title = "移除实例";
            var url = "/resource/remove?cluster="+cluster+"&instance="+instance;
            var width = 380;
            var height = 232;
            layer_show(title,url,width,height);
        }
    }

    /* 批量修改前置校验 */
    function checkBatchEdit() {
        var cluster = $("#cluster").val();
        var attribute = $("#attribute").val();
        if (cluster==="全部") {
            layer.tips('请选择集群', '#cluster', {tips:3});
            return false;
        }
        if (attribute==="全部") {
            layer.tips('请选择属性', '#attribute', {tips:3});
            return false;
        }
        return true;
    }

    /* 批量修改-属性 */
    function batchEditAttribute() {
        var cluster = $("#cluster").val();
        var attribute = $("#attribute").val();
        if (checkBatchEdit()) {
            var title = "批量编辑集群属性";
            var url = "/resource/batchEdit?cluster="+cluster+"&attribute="+attribute;
            var width = 380;
            var height = 300;
            layer_show(title,url,width,height);
        }
    }

    /* 修改-属性 */
    function editAttribute(title,url,id,w,h){
        layer_show(title,url,w,h);
    }

    /* 查找资源 */
    function doSubmit() {
        $("#myForm").submit();
        var index = layer.load(2);
    }
</script>
